<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <div :style="style">
        {{element.options.defaultValue}}
      </div>
    </drop-wrap>
</template>

<script>
  export default {
    props: ["element", "data", "index"],
    data () {
      return {
      }
    },
    computed: {
      store () {
        return this.element.getRoot();
      },
      style(){
        let boxModel={}
        Object.entries(this.element.boxModelStyle).map((item)=>{
              boxModel[item[0]]=item[1]+'px'
        })
        return {
          fontSize:this.element.options.fontSize+'px',
          color:this.element.options.color,
          textAlign:this.element.options.align,
          ...boxModel
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>